﻿<style>
    #ApplyInfo {
        position: relative
    }

        #ApplyInfo .lg-search-container {
            padding: 0;
        }

        #ApplyInfo .lg-search {
            border-bottom: 1px solid #f0f0f0;
            background: #fff;
            padding-bottom: 10px;
            margin-bottom: 10px;
            position: sticky;
            top: 0;
            z-index: 2;
            width: 100%;
            padding: 10px;
        }

        #ApplyInfo .lg-plans {
            padding: 0 10px;
        }

        #ApplyInfo li.lg-plans-item {
            line-height: 35px;
            margin: 5px 0;
            padding: 0 5px;
            border: 1px solid #f0f0f0;
            cursor: pointer;
            position: relative;
        }

            #ApplyInfo li.lg-plans-item .fa-check {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
                color: #fff;
                font-size: 10px;
            }

            #ApplyInfo li.lg-plans-item:after {
                width: 0;
                height: 0;
                border-top: 20px solid #1E9FFF;
                border-left: 20px solid transparent;
                content: "";
                display: none;
                position: absolute;
                top: 0;
                right: 0;
            }

            #ApplyInfo li.lg-plans-item.selected:after {
                display: block;
            }

            #ApplyInfo li.lg-plans-item.selected {
                color: #1E9FFF;
            }

        /*标签组*/
        #ApplyInfo .lg-tag-group {
            display: flex;
            flex-wrap: wrap;
        }

            #ApplyInfo .lg-tag-group .lg-tag-item {
                border: 1px dashed #ccc;
                margin: 6px;
                padding: 3px 6px;
                display: flex;
            }

                #ApplyInfo .lg-tag-group .lg-tag-item span.fa {
                    line-height: 28px;
                    margin-left: 5px;
                    cursor: pointer;
                }

                    #ApplyInfo .lg-tag-group .lg-tag-item span.fa:hover {
                        color: #007DDB;
                    }

                #ApplyInfo .lg-tag-group .lg-tag-item:hover {
                    background: #f9f9f9;
                }

        #ApplyInfo .lg-addTip {
            border: 1px dashed #ccc;
            margin: 6px;
            padding: 3px 6px;
            line-height: 2;
            text-align: center;
            cursor: pointer;
        }

            #ApplyInfo .lg-addTip:hover {
                background: #f9f9f9;
                color: #007DDB;
            }
       
</style>
<div class="layui-card" id="ApplyInfo">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>报名记录
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
            <button v-if="apply&&apply.IsDelete==0" :class="['layui-btn layui-btn-sm',{'layui-btn-danger':editor.state=='on'},{'layui-btn-normal':editor.state=='off'}]" v-on:click="onEditClick"><i class="fa fa-pencil-square-o fa-fw"></i>{{editor.text}}</button>
            <button class="layui-btn layui-btn-warm layui-btn-sm" title="迁移至其它计划" v-on:click="onTurnPlan"><i class="fa fa-external-link fa-fw" aria-hidden="true"></i>迁移</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" title="更多操作" v-on:click="ManagePanelSwitch"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>管理</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <div class="lg-form-head">
            <div class="lg-form-head-title">
                <input class="lg-input lg-input-text" :value="apply.PlanTitle" v-if="apply!=null" readonly>
            </div>
        </div>
        <div class="form-body">
            <lg-form :data="form" v-on:submit="submit" bt-text="提交编辑" :render-type="editor.state=='off'?1:0"></lg-form>
        </div>       
    </div>
    <div class="layui-card-body" id="turnPlan" style="display:none">
        <div class="lg-search lg-layout-row lg-layout-row-auto" style="">
            <div class="lg-search-item" style="width:100px">
                <lg-form-date :data="{Title:'学年',Name:'lg-year'}" v-model:value="turnPlan.where.Year" format="year" v-on:done="getPlansForOption"></lg-form-date>
            </div>
            <div class="lg-search-item" style="width:130px">
                <lg-form-select :data="{Title:'学期',Options:turnPlan.options.Semester}" v-model:value="turnPlan.where.Semester" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-select :data="{Title:'班级',Options:turnPlan.options.Grades}" v-model:value="turnPlan.where.GradeId" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
        </div>
        <div class="lg-plans">
            <ul>
                <li :class="['lg-plans-item',{'selected':turnPlan.selected==item.Value}]" v-for="item in turnPlan.plans" v-on:click="turnPlan.selected=item.Value">{{item.Text}}<span class="fa fa-check"></span></li>
            </ul>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
    <div id="ApplyInfoRightControlPanel" v-if="apply!=null">
        <div :class="['popupShadow',{'act':managePanel}]" v-on:click="ManagePanelSwitch"></div>
        <div :class="['popupContainer-right',{'act':managePanel}]">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>控制面板</h3>
                <span class="fa fa-angle-right" v-on:click="ManagePanelSwitch"></span>
            </div>
            <div class="popupContent">
                <div class="lg-form-item">
                    <div class="lg-form-title">
                        <div class="lg-form-title-item">
                            <span class="cn">标签</span>
                        </div>
                    </div>
                    <div class="lg-form-tips"></div>
                    <div class="lg-form-control">
                        <div class="lg-tag-group">
                            <div class="lg-tag-item" v-for="(item,index) in tags">
                                <span class="tag">{{item}}</span>
                                <span class="fa fa-close fa-fw" v-on:click="OnDelTag(index)"></span>
                            </div>
                            <div class="lg-addTip" v-on:click="OnAddTag"><i class="fa fa-plus fa-fw"></i>添加</div>
                        </div>
                    </div>
                </div>

                <div class="lg-form-item">
                    <div class="lg-form-title">报名费状态：</div>
                    <div class="lg-form-control">
                        <ul class="lg-form-extra-ul">
                            <li :class="{'checked':apply.PayState==0}" v-on:click="SetPayState(0)">免费</li>
                            <li :class="{'checked':apply.PayState==1}" v-on:click="SetPayState(1)">待支付</li>
                            <li :class="{'checked':apply.PayState==2}" v-on:click="SetPayState(2)">已支付</li>
                            <li :class="{'checked':apply.PayState==3}" v-on:click="SetPayState(3)">申请退费</li>
                            <li :class="{'checked':apply.PayState==4}" v-on:click="SetPayState(4)">已退费</li>
                        </ul>
                    </div>
                </div>
                <div class="lg-form-item">
                    <div class="lg-form-title">录取状态：</div>
                    <div class="lg-form-control">
                        <ul class="lg-form-extra-ul">
                            <li :class="{'checked':apply.PassState==1}" v-on:click="SetPassState(1)">录取</li>
                            <li :class="{'checked':apply.PassState==2}" v-on:click="SetPassState(2)">未录取</li>
                            <li :class="{'checked':apply.PassState==3}" v-on:click="SetPassState(3)">待定</li>
                        </ul>
                    </div>
                </div>
                <div class="lg-form-item">
                    <div class="lg-form-title">是否参加考试：</div>
                    <div class="lg-form-control">
                        <ul class="lg-form-extra-ul">
                            <li :class="{'checked':apply.IsGiveUp==0}" v-on:click="SetIsGiveUp(0)">默认</li>
                            <li :class="{'checked':apply.IsGiveUp==1}" v-on:click="SetIsGiveUp(1)">不参加</li>
                        </ul>
                    </div>
                </div>
                <div class="lg-form-item">
                    <div class="lg-form-title">学费状态：</div>
                    <div class="lg-form-control">
                        <ul class="lg-form-extra-ul lg-form-extra-ul-wrap">
                            <li :class="{'checked':apply.Tuition==1}" v-on:click="SetTuitionState(1)">待缴费</li>
                            <li :class="{'checked':apply.Tuition==2}" v-on:click="SetTuitionState(2)">预缴费</li>
                            <li :class="{'checked':apply.Tuition==3}" v-on:click="SetTuitionState(3)">已缴费</li>
                            <li :class="{'checked':apply.Tuition==4}" v-on:click="SetTuitionState(4)">申请退费</li>
                            <li :class="{'checked':apply.Tuition==5}" v-on:click="SetTuitionState(5)">已退费</li>
                            <li :class="{'checked':apply.Tuition==6}" v-on:click="SetTuitionState(6)">放弃缴费</li>
                        </ul>
                    </div>
                </div>

                <div class="title relation-title">历史报名记录</div>
                <div class="lg-form-table">
                    <table class="lg-table" v-if="history!=null&&history.length>0">
                        <tr>
                            <th style="text-align:center;width:50px">序号</th>
                            <th style="text-align:center">招生计划</th>
                            <th style="text-align:center;width:120px">日期</th>
                        </tr>
                        <tr v-for="(item,index) in history">
                            <td style="text-align:center">{{index+1}}</td>
                            <td>{{item.PlanTitle}}</td>
                            <td style="text-align:center">{{item.AddTime}}</td>
                        </tr>
                    </table>
                    <div v-else>没有记录~</div>
                </div>


            </div>
        </div>

    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js?v=1'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        apply: null,
                        form: [],
                        id: @ViewBag.id,
                        editor: {
                            text: "编辑",
                            state: "off"
                        },
                        turnPlan: {
                            where: {
                                Year: lg.GetDate('yyyy'),
                                Semester: "",
                                GradeId: ""
                            },
                            options: {
                                Semester: [
                                    {
                                        Text: "不限",
                                        Value: ""
                                    },
                                    {
                                        Text: "1",
                                        Value: 1
                                    },
                                    {
                                        Text: "2",
                                        Value: 2
                                    }],
                                Grades: []
                            },
                            plans: [],
                            selected: 0
                        },
                        history: [],
                        managePanel: false
                    }
                },
                computed: {
                    tags: function () {
                        var arry = [];
                        if (this.apply && this.apply.Tags) {
                            arry = lg.convert.toJson(this.apply.Tags, []);
                        }
                        return arry;
                    }
                },
                mounted: function () {
                    this.getApply();
                    this.getGradesAndSetOption();
                },
                methods: {
                    getApply: function () {
                        var that = this;
                        lg.request({
                            url: "/api/sys/apply/getapply",
                            data: { id: @ViewBag.id},
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        this.apply = res.data[0];
                                        this.form = freeForm.setValue(res.data[0].Items, res.data[0].FormData);
                                        var arry = this.form.filter(p => p.TypeName == 'SmsCode');
                                        if (arry.length > 0) {
                                            arry[0].Data.IsRender = false;
                                        };
                                        this.GetHistory(res.data[0]);
                                    }
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    GetHistory: function (res) {
                        var id = res.Id;
                        var fd = JSON.parse(res.FormData);
                        var idnumber = fd.IdNumber.value;
                        lg.request({
                            url: "/api/sys/apply/getapplyhistory",
                            data: { idnumber: idnumber, applyid: id },
                            success: res => {
                                if (res.code == 0 && res.data) {
                                    this.history = res.data;
                                }
                            }
                        })
                    },
                    submit: function (data) {
                        var that = this;
                        var errCount = 0;
                        var obj = {};
                        var items = this.form
                        for (let i in items) {
                            let item = items[i];
                            if (item.Data.IsRender) {
                                var res = freeForm.verify(item.TypeName, item.Data)
                                if (!res.state) {
                                    item.Data.error = true;
                                    item.Data.errMsg = res.msg;
                                    errCount++;
                                } else {
                                    item.Data.error = false;
                                    item.Data.errMsg = "验证通过！";
                                }
                            }
                        }
                        if (errCount == 0) {
                            for (let i in items) {
                                var type = items[i].Data;
                                if (type.IsRender) {
                                    if (type.getValue) {
                                        obj[type.Name] = type.getValue();
                                    } else {
                                        obj[type.Name] = type.Value;
                                    }
                                } else {
                                    obj[type.Name] = 'lg-no-render';
                                }
                            }
                            //身份证和出生日期联合较验
                            if (obj.IdType && obj.IdType.value == "身份证") {
                                if (typeof obj.IdNumber == "object") {
                                    var b = lg.age.getBirthday(obj.IdNumber.value) == obj.Birthday;
                                    if (!b) {
                                        layer.msg("您填写的出生日期与身份证上的日期不一致！", { icon: 2 });
                                        return false;
                                    }
                                }
                            }
                            lg.request({
                                url: "/api/sys/apply/EditApply",
                                data: { Id: this.apply.Id, FormData: JSON.stringify(obj) },
                                method: "post",
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("修改成功！", { icon: 1, time: 1000 }, function () {
                                            that.editor = {
                                                text: "编辑",
                                                state: "off"
                                            }
                                        })
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        } else {
                            layer.msg("表单较验未通过，请修改后再行提交！", { icon: 2 })
                        }
                    },
                    done: function (item) {
                        if (item.Name == "IdNumber" && item.IdType == "身份证") {
                            if (lg.regx.idCard(item.Value)) {
                                var arry = this.form.filter(p => p.Data.Name == "Birthday");
                                if (arry.length > 0) {
                                    arry[0].Data.Value = lg.age.getBirthday(item.Value);
                                }
                            }
                        }
                    },
                    onEditClick: function () {
                        if (this.editor.state == 'off') {
                            this.editor = {
                                text: "取消编辑",
                                state: "on"
                            }
                        } else {
                            this.editor = {
                                text: "编辑",
                                state: "off"
                            }
                        }
                    },
                    onTurnPlan: function () {
                        this.getPlansForOption();
                        var that = this;
                        layer.open({
                            type: 1
                            , title: "学生迁移"
                            , area: ['800px', '500px'] //宽高
                            , content: $("#turnPlan")
                            , btn: ['确认迁移', '放弃操作']
                            , yes: function () {
                                if (that.turnPlan.selected) {
                                    layer.closeAll();
                                    that.TurnPlan();
                                } else {
                                    layer.msg("请先选择需要迁入的计划！", { icon: 2 });
                                    return false;
                                }
                            }
                            , bt2: function () {
                                that.turnPlan.selected = 0;
                                layer.closeAll();
                            }
                        })
                    },
                    TurnPlan: function () {
                        lg.request({
                            url: "/api/sys/apply/turnplan",
                            method: "post",
                            data: { planid: this.turnPlan.selected, id: this.id },
                            success: res => {
                                this.turnPlan.selected = 0;
                                if (res.code == 0) {
                                    layer.msg("迁移成功！", { icon: 1 });
                                    this.getApply();
                                } else {
                                    layer.msg("迁移失败：" + res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    back: function () {
                        frame.Back(page.url, res => {
                            res.reload();
                        })
                    },
                    getPlansForOption: function () {
                        lg.request({
                            url: "/api/sys/apply/getPlanList",
                            data: {
                                Page: 1,
                                Limit: 9999,
                                Year: this.turnPlan.where.Year,
                                Semester: this.turnPlan.where.Semester,
                                GradeId: this.turnPlan.where.GradeId
                            },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        var arry = [];
                                        for (let i in res.data) {
                                            arry.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                        }
                                        this.turnPlan.plans = arry;
                                    } else {
                                        this.turnPlan.plans = [];
                                    }
                                }
                            }
                        })
                    },
                    getGradesAndSetOption: function () {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: { page: 1, limit: 999 },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        var grades = this.Sort(res.data, 0, []);
                                        var options = [{ Text: '不限', Value: '' }];
                                        for (let i in grades) {
                                            options.push({
                                                Text: grades[i].FullName,
                                                Value: grades[i].Id
                                            })
                                        }
                                        this.turnPlan.options.Grades = options;
                                    } else {
                                        this.turnPlan.options.Grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Sort: function (data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    ManagePanelSwitch: function () {
                        this.managePanel = !this.managePanel
                    },
                    OnAddTag: function () {
                        var that = this;
                        layer.prompt({ title: '填写标签', formType: 2 }, function (text, index) {
                            if (text.trim().length > 0) {
                                layer.close(index);
                                var arry = that.tags;
                                arry.push(text);
                                lg.request({
                                    url: "/api/sys/apply/EditApplyTags",
                                    data: { Id: that.id, Tags: JSON.stringify(arry) },
                                    method: "post",
                                    success: res => {
                                        if (res.code == 0) {
                                            that.apply.Tags = JSON.stringify(arry);
                                        } 
                                        else {
                                            layer.msg(res.msg, { icon: 2 })
                                        }
                                    }
                                })
                            } else {
                                layer.msg("内容不可为空!", { icon: 2 })
                            }

                        });
                    },
                    OnDelTag: function (index) {
                        var arry = this.tags;
                        arry.splice(index, 1);
                        lg.request({
                            url: "/api/sys/apply/EditApplyTags",
                            data: { Id: this.id, Tags: JSON.stringify(arry) },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.apply.Tags = JSON.stringify(arry);
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetPayState: function (state) {
                        lg.request({
                            url: "/api/sys/apply/EditApplyPayState",
                            data: { id: this.id, PayState: state },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.apply.PayState = state;
                                    layer.msg("报名费支付状态修改成功！", { icon: 1 })
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetPassState: function (state) {
                        lg.request({
                            url: "/api/sys/apply/EditApplyPassState",
                            data: { id: this.id, PassState: state },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.apply.PassState = state;
                                    layer.msg("录取状态修改成功！", { icon: 1 })
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetIsGiveUp: function (state) {
                        lg.request({
                            url: "/api/sys/apply/EditApplyIsGiveUp",
                            data: { id: this.id, IsGiveUp: state },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.apply.IsGiveUp = state;
                                    layer.msg("考试意向修改成功!", { icon: 1 })
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetTuitionState: function (state) {
                        lg.request({
                            url: "/api/sys/apply/EditApplyTuition",
                            data: { id: this.id, Tuition: state },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.apply.Tuition = state;
                                    layer.msg("学费支付状态修改成功！", { icon: 1 })
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            app.mount("#ApplyInfo")
        }
    }).mount();
</script>